<template>
  <el-container>
    <!-- 左边导航开始 -->
    <div style="width:210px;height:100%">
      <div id="show-gdt">
        <el-aside width="210px">
          <common></common>
        </el-aside>
      </div>
    </div>
    <!-- 左边导航结束 -->
    <el-container>
      <!-- 头部开始 -->
      <el-header height="70px">
        <div class="header-box">
          <div class="db">
            <div class="ts">
              <el-badge is-dot class="item">
                <img id="u76_img" class="img" src="../assets/t9.png" />
              </el-badge>
              <mtips></mtips>
            </div>
            <div class="tx">
              <el-avatar :src=tSrc1>
                <img :src='tSrc1' />
              </el-avatar>
              <p>{{tName}}</p>
              <mtipsa class="mtip-box2"></mtipsa>
            </div>
          </div>
        </div>
      </el-header>
      <!-- 头部结束 -->
      <!-- 内容开始 -->
      <el-main style="padding:0px; overflow: initial;">
        <router-view></router-view>
      </el-main>
      <!-- 内容结束 -->
    </el-container>
  </el-container>
</template>

<script>
import common from "./common";
import mtips from "../components/Messagetips";
import mtipsa from "../components/Messagetips2";

export default {
  components: {
    common,
    mtips,
    mtipsa,
  },
  data:function(){
    return{
      tSrc1:"",
      tName:''
    }
  },
  mounted() {
    this.$axios.get('data/login.json').then(res=>{
       let a=document.cookie.split(';')
        a = a[0].split('=')[1]
      res.forEach(item=>{
      if(item.id==a){
         this.tSrc1=item.img;
         this.tName=item.name;
       } 
      })
    })
  },
};
</script>


<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body,
#app,
.el-container {
  height: 100%;
}

#app .el-aside {
  overflow: initial;
  background: #fff;
  color: #333;
  border-right: 1px solid #e6e6e6;
}
.el-header {
  background-color: rgba(145, 55, 243, 1);
}
.el-main {
  margin-top: 70px;
}
#show-gdt,
.el-header {
  position: fixed;
  top: 0px;
}
#show-gdt {
  overflow: auto;
  height: 100vh;
  /* overflow-X:none; */
}
#show-gdt::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}

#app .el-header {
  padding: 0;
  width: 100%;
  z-index: 20;
}
.header-box {
  position: relative;
  width: 1140px;
  height: 100%;
}
.db {
  position: absolute;
  width: 150px;
  height: 100%;
  float: right;
  right: 0;
  margin-right: 20px;
}
.tx {
  float: right;
  margin-top: 20px;
  margin-right: 40px;
  position: relative;
}
.ts {
  position: relative;
  float: left;
  margin-top: 25px;
}
.tx:hover > .mtip-box {
  width: 184px;
  transition: 1s;
}
.mtip-box2 {
  left: -96px;
  top: 5px;
}
.ts:hover > .mtip-box {
  width: 244px;
  transition: 1s;
}
.ts .el-badge__content.is-fixed.is-dot {
  right: 10px;
  top: 3px;
}
.ts .el-badge__content.is-dot {
  width: 12px;
  height: 12px;
}
.db .el-avatar {
  height: 30px;
  width: 30px;
}
.tx p {
  display: inline-block;
  position: absolute;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  margin: -4px 0 0 14px;
}
.el-min {
  background-color: rgba(242, 242, 242, 0.298);
  margin: 0 auto;
}
</style>